<script setup>
import useStore from "@/store"

const {homeStore} = useStore()

const back = () => {
  $bus.emit("updatePlayStatus")
  homeStore.updateLeftWidth(-300)
}
</script>

<template>
  <div class="w-[300px] p-[12px] bg-[#161616] h-full relative box-border text-[#fff]">
    <!--扫码区域-->
    <div class="flex justify-between items-center">
      <span>下午好</span>
      <div class="flex items-center bg-[#272626] p-[10px] justify-center rounded-[5px]">
        <van-icon name="scan" color="#fff" size="16"/>
        <span class="ml-[10px]">扫一扫</span>
      </div>
    </div>
    <!-- 常用小程序-->
    <div class="bg-[#272626] mt-[10px] rounded-[5px] p-[10px]">
      <!--标题栏-->
      <div class="flex justify-between items-center">
        <span>常用小程序</span>
        <div>
          <span class="text-[#808080] text-[12px]">全部</span>
          <van-icon name="arrow" size="12" color="#808080"/>
        </div>
      </div>
      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <template #icon>
            <div class="rounded-[10px] overflow-hidden w-[50px] h-[50px] mb-[5px]">
              <van-image
                  src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
                  class="w-full h-full"
              />
            </div>
          </template>
          <template #text>
            今日头条
          </template>
        </van-grid-item>
        <van-grid-item>
          <template #icon>
            <div class="rounded-[10px] overflow-hidden w-[50px] h-[50px] mb-[5px]">
              <van-image
                  src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
                  class="w-full h-full"
              />
            </div>
          </template>
          <template #text>
            西瓜视频
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 最近常看-->
    <div class="bg-[#272626] mt-[10px] rounded-[5px] p-[10px]">
      <!--标题栏-->
      <div class="flex justify-between items-center">
        <span>最近常看</span>
        <div>
          <span class="text-[#808080] text-[12px]">全部</span>
          <van-icon name="arrow" size="12" color="#808080"/>
        </div>
      </div>
      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <template #icon>
            <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
                class="w-[50px] h-[50px]"
                round
            />
          </template>
          <template #text>
            黑丝小姐
          </template>
        </van-grid-item>
        <van-grid-item>
          <template #icon>
            <van-image
                src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
                class="w-[50px] h-[50px]"
                round
            />
          </template>
          <template #text>
            白丝小姐
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 常用功能-->
    <div class="bg-[#272626] mt-[10px] rounded-[5px] p-[10px]">
      <!--标题栏-->
      <div class="flex justify-between items-center">
        <span>常用功能</span>
        <div></div>
      </div>
      <van-grid :border="false" :column-num="3" icon-size="40px">
        <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字"/>
      </van-grid>
    </div>
    <!--右侧遮罩层区域-->
    <div class="mask" v-if="homeStore.leftWidth == 0" @click="back"></div>
  </div>
</template>

<style scoped lang="scss">
:deep(.van-grid-item__content) {
  background: #272626;
}

:deep(.van-grid-item__text) {
  color: #fff;
  font-size: 16px;
}

.mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 300px;
  width: calc(100vw - 300px);
  background-color: rgba(0, 0, 0, .2);
  z-index: 99999;
}
</style>
